<template>
    <el-row class="roleMan">
        <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
<!--            <el-input placeholder="请输入内容" style="width: 300px;margin-right: 20px;"></el-input>-->
<!--            <el-button type="primary" style="width: 100px;">搜索</el-button>-->
            <el-button type="primary" @click="addRole" style="width: 100px;position: absolute;right: 0;">新增角色</el-button>
        </el-row>
        <el-table
                :data="roleData"
                size="mini"
                style="width: 100%;font-size: 16px;border: 1px solid rgb(247,247,247);"
                @current-change="roleChge"
                height="730"
                max-height="730"
                :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                highlight-current-row
                border
        >
            <el-table-column prop="name" label="角色" min-width="120"></el-table-column>
            <el-table-column fixed="right" width="120" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" style="font-size: 16px;" @click="editRole( scope.row )">修改
                    </el-button>
                    <el-button type="text" size="mini" style="font-size: 16px;" @click="allocations( scope.row )">分配</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="pagination">
            <el-pagination
                    @size-change="pgSizeChge"
                    @current-change="pgchge"
                    :current-page="rolePage.currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="rolePage.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="rolePage.totalElements"
            ></el-pagination>
        </el-row>
        <transition name="el-fade-in">
            <floatingBox v-show="editBoxShow">
                <addRole v-if="addShow" slot="edit" @editState="editState"></addRole>
                <editRole v-if="editShow" slot="edit" :roleUuid="uuid" @editState="editState"></editRole>
                <allocationsRole v-if="allcashShow" slot="edit" :roleUuid="uuid"
                                 @editState="editState"></allocationsRole>
            </floatingBox>
        </transition>
    </el-row>
</template>

<script>
    import {getDataForSP, writePageInfo} from "../../../utils/webUtils.js";
    import floatingBox from "../../public/floatingBox.vue";
    import editRole from "./editRole.vue";
    import addRole from "./addRole.vue";
    import allocationsRole from "./allocationsRole.vue";
    export default {
        name: "roleMan",
        components: {addRole, editRole, floatingBox, allocationsRole},
        data() {
            return {
                editBoxShow: false,
                addShow: false,
                editShow: false,
                allcashShow: false,
                roleEdit: false,
                uuid: '',
                roleData: [],
                //角色分页
                rolePage: {
                    pageSize: 10,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {}
                }
            };
        },
        mounted() {
            this.queryRole();
        },
        methods: {
            editState( msg ) {
                this.editBoxShow = msg;
                this.editShow = msg;
                this.addShow = msg;
                this.allcashShow = msg;
                this.roleEdit = msg;
                this.queryRole();
            },
            addRole() {
                this.editBoxShow = true;
                this.addShow = true;
            },
            editRole( val ) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.roleEdit = true;
            },
            allocations(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.allcashShow = true;
                this.roleEdit = true;
            },
            roleChge( val ) {
                if (this.roleEdit) {
                    this.uuid = val.uuid;
                }
            },
            //查询所有角色
            queryRole() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/role/search/findAll",
                    params: getDataForSP(this.rolePage)
                }).then(response => {
                    this.roleData = response.data.content;
                    writePageInfo(this.rolePage, response.data);
                }).catch(error => {
                    console.log(error);
                });
            },
            pgSizeChge(pageSize) {
                this.rolePage.pageSize = pageSize;
                if (this.rolePage.currentPage === 1) {
                    this.queryRole();
                }
                this.rolePage.currentPage = 1;
            },
            pgchge(currentPage) {
                this.rolePage.currentPage = currentPage;
                this.queryRole();
            }
        }
    };
</script>

<style scoped>
    .roleMan {
        margin-right: 30px;
    }

</style>